<template>
  <div id="recordDialog">
    <el-dialog
      title="奖品发放记录"
      :visible.sync="dialogData.isShow"
      width="550px"
      :before-close="HandleClose"
    >
      <div class="cus-radio-block">
        <el-radio-group
          v-model="used"
          size="mini"
          fill="#ff8c00"
          text-color="#fff"
          @change="handleChange"
        >
          <el-radio-button label="未使用"></el-radio-button>
          <el-radio-button label="已过期"></el-radio-button>
        </el-radio-group>
      </div>
      <div class="cus-row--coupon">
        <!--未使用优惠券-->
        <div v-if="used === '未使用'">
          <div v-for="(item, index) in couponList" :key="index">
            <div v-if="item.isOverdue === 'no'">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div
                    class="coupon-background"
                    :style="
                      item.couponTag === 'common'
                        ? common
                        : item.couponTag === 'course'
                        ? course
                        : show
                    "
                  >
                    <span v-if="item.price" class="coupon-type">￥</span>
                    <span v-if="item.price" class="coupon-price">{{
                      item.price
                    }}</span>
                  </div>
                </el-col>
                <el-col :span="12" :push="5">
                  <span class="coupon-indate">有效期：{{ item.indate }}</span>
                </el-col>
              </el-row>
              <el-divider></el-divider>
            </div>
          </div>
        </div>
        <!--已过期优惠券-->
        <div v-if="used === '已过期'">
          <div v-for="(item, index) in couponList" :key="index">
            <div v-if="item.isOverdue === 'yes'">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div
                    class="coupon-background"
                    :style="
                      item.couponTag === 'common'
                        ? incommon
                        : item.couponTag === 'course'
                        ? incourse
                        : inshow
                    "
                  >
                    <span v-if="item.price" class="coupon-type">￥</span>
                    <span v-if="item.price" class="coupon-price">{{
                      item.price
                    }}</span>
                  </div>
                </el-col>
                <el-col :span="12" :push="5">
                  <span class="incoupon-indate">有效期：{{ item.indate }}</span>
                </el-col>
              </el-row>
              <el-divider></el-divider>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click.prevent="HandleCloseView"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'RecordDialog',
  msg: '属性管理--奖品发放记录',
  props: ['dialogData'],
  data: function() {
    return {
      used: '未使用',
      loading: true,
      // 普通优惠券
      common: {
        backgroundImage:
          'url(' + require('../../../assets/goods/coupon.png') + ')'
      },
      // 看展优惠券
      show: {
        backgroundImage:
          'url(' + require('../../../assets/goods/lookCoupon.png') + ')'
      },
      // 听课劵
      course: {
        backgroundImage:
          'url(' + require('../../../assets/goods/courseCoupon.png') + ')'
      },
      // 过期普通优惠券
      incommon: {
        backgroundImage:
          'url(' + require('../../../assets/goods/incoupon.png') + ')'
      },
      // 过期看展优惠券
      inshow: {
        backgroundImage:
          'url(' + require('../../../assets/goods/inlookCoupon.png') + ')'
      },
      // 过期听课劵
      incourse: {
        backgroundImage:
          'url(' + require('../../../assets/goods/incourseCoupon.png') + ')'
      },
      couponList: [
        {
          price: '100',
          indate: '2019-03-04 至 2019.10.10',
          couponTag: 'common',
          isOverdue: 'yes'
        },
        {
          price: '200',
          indate: '2019-03-04 至 2019.10.10',
          couponTag: 'common',
          isOverdue: 'yes'
        },
        {
          indate: '2019-03-04 至 2019.10.10',
          couponTag: 'course',
          isOverdue: 'yes'
        },
        {
          indate: '2019-03-04 至 2019.10.10',
          couponTag: 'show',
          isOverdue: 'yes'
        },
        {
          price: '100',
          indate: '2019-03-04 至 2019.10.10',
          couponTag: 'common',
          isOverdue: 'no'
        },
        {
          price: '300',
          indate: '2019-03-04 至 2019.10.10',
          couponTag: 'common',
          isOverdue: 'no'
        },
        {
          indate: '2019-03-04 至 2019.10.10',
          couponTag: 'show',
          isOverdue: 'no'
        },
        {
          indate: '2019-03-04 至 2019.10.10',
          couponTag: 'course',
          isOverdue: 'no'
        }
      ]
    }
  },
  mounted() {},
  methods: {
    // 关闭前
    HandleClose(done) {
      this.handleCancel()
      done()
    },
    // 关闭
    HandleCloseView() {
      this.handleCancel()
    },
    // 取消
    handleCancel() {
      this.loading = false
      this.dialogData.isShow = false
    },
    // 改变状态
    handleChange(val) {
      if (val === '未使用') {
        this.used = '未使用'
      } else {
        this.used = '已过期'
      }
    }
  }
}
</script>
<style lang="less">
#recordDialog {
  @green: #1dc8a4;
  @green-light: rgba(29, 200, 164, 0.8);
  .el-dialog {
    //reset diogla style
    border-radius: 4px;
    .el-dialog__header {
      border-bottom: 1px solid rgba(225, 228, 233, 1);
    }
    .el-radio-button__inner {
      color: #ff8c00;
      border-color: #ff8c00;
    }
    .el-radio-button:first-child .el-radio-button__inner {
      border-color: #ff8c00;
    }
    .el-dialog__footer {
      margin-top: 50px;
      padding: 10px;
      /*border-top: 1px solid #eeeeee;*/
    }
    //自定义
    .cus-radio-block {
      text-align: center;
    }
    .cus-row--coupon {
      margin-top: 30px;
      .el-row {
        margin-bottom: 20px;
      }
      .coupon-background {
        background-repeat: 'no-repeat';
        background-size: 100% 100%;
        width: 150px;
        height: 70px;
      }
      .coupon-price {
        position: relative;
        top: 14px;
        left: 55px;
        color: #fff;
        font-weight: 700;
        font-size: 30px;
      }
      .coupon-type {
        position: relative;
        top: 1px;
        left: 60px;
        color: #fff;
      }
      .coupon-indate {
        height: 70px;
        line-height: 70px;
        font-weight: 700;
      }
      .incoupon-indate {
        height: 70px;
        line-height: 70px;
        font-weight: 700;
        color: rgb(190, 189, 189);
      }
    }

    .dialog-footer {
      .el-button {
        padding: 5px 30px;
        border-radius: 2px;
        font-family: 'Microsoft YaHei';
        font-size: 14px;

        &.el-button--primary {
          background-color: @green;
          border-color: @green;

          &:hover {
            background-color: @green-light;
          }
        }

        &.el-button--default {
          &:hover {
            border-color: @green;
            background-color: @green-light;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
